import React, { Component } from 'react'
import PubSub from 'pubsub-js'
import './index.css'
 
export default class List extends Component {
 
  state = {
    userData: [], //初始化状态为数组
    isFirst: true,  //是否第一次访问
    isLoading: false, //是否正在加载
    error: '' //返回错误
  }
 
  // List组件挂载时订阅
  componentDidMount() {
    // 订阅消息，接收改变的状态值
    this.token = PubSub.subscribe('User_Data', (_, data) => {
      this.setState(data)
    })
  }
 
  // List组件卸载时取消订阅
  componentWillUnmount() {
    PubSub.unsubscribe(this.token)
  }
 
  render() {
    // 获取状态
    const { userData, isFirst, isLoading, error } = this.state
 
    return (
      <div className="row">
 
        {
          /*判断是否是第一次访问 */
          isFirst ? <h2>欢迎您来访！！！</h2> :
            /* 判断是否正在加载中 */
            isLoading ? <h2>加载中。。。。。。。</h2> :
              /* 判断请求是否出错 */
              error ? <h2>出错了！？！？！？</h2> :
                /* 将请求到的数据渲染到页面 */
                userData.map(userObj => {
                  return (
                    <div className="card" key={userObj.id}>
                      <a href={userObj.html_url} rel="noreferrer">
                        <img alt='head-t' src={userObj.avatar_url} style={{ width: '100px' }} />
                      </a>
                      <p className="card-text">{userObj.login}</p>
                    </div>
                  )
                })
        }
      </div>
    )
  }
}